﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ViewIssues.aspx.cs" Inherits="HTComics.Web.ViewIssues" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../Css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/spinner.js" type="text/javascript"></script>

    <script type="text/javascript">
        var cid = <%=cid%>;

        var PAGE_SIZE = <%=pageSize%>;
        var PAGE_FIRST = "+";
        var PAGE_PREV = "<";
        var PAGE_NEXT = ">";
        var PAGE_LAST = "-";

        var totalIssues = <%=totalIssues%>;
        var currPage = 0;
        var maxPages = Math.ceil(totalIssues / PAGE_SIZE);

        $(document).ready(doOnLoad);

        
        function doOnLoad() {            
            setPageSelect();
            loadPage(PAGE_FIRST);
        }

        function setPageSelect() {
            for (var i=1; i <= Math.ceil(totalIssues / PAGE_SIZE); i++) {
                sIssue = $('#MainContent_heading' + ((i-1) * PAGE_SIZE)).attr("issue");

                if (((i-1) * PAGE_SIZE) + (PAGE_SIZE -1) >= totalIssues)
                    eIssue = $('#MainContent_heading' + (totalIssues-1)).attr("issue");
                else
                    eIssue = $('#MainContent_heading' + parseInt(((i-1) * PAGE_SIZE) + (PAGE_SIZE -1))).attr("issue");

                $('#selPager').append('<option value="' + (i-1) + '">' + "Page " + i + ' [Issues: ' + sIssue + ' - ' + eIssue + ']</option>');
                
            }        
        }

        function loadPage(newPage) {
            var sInd = -1;

            if (newPage == -1)
                return;

            switch (newPage) {
                case PAGE_FIRST:
                    newPage = 0;
                    break;

                case PAGE_PREV:
                    if (currPage == 0) return;
                    newPage = parseInt(currPage)-1;
                    break;

                case PAGE_NEXT:
                    if (currPage == (maxPages - 1)) return;
                    newPage = parseInt(currPage)+1;
                    break;

                case PAGE_LAST:
                    newPage = (maxPages - 1);
                    break;   
            }

            $("#selPager").val(newPage);

            $("#divResults").empty();
            $("#divResults").accordion("destroy");
            currPage = newPage;
            for (var i = 0; i <= PAGE_SIZE - 1; i++) {
                index = (newPage * PAGE_SIZE) + i;

                if (sInd == -1) sInd = index;

                if (index == totalIssues) 
                {
                    index--;
                    break;
                }

                $("#MainContent_heading" + index).clone().appendTo("#divResults");
                $("#MainContent_div" + index).clone().appendTo("#divResults");
            }            

            $("#tdShowing").html("Showing Issues " + $("#MainContent_heading" + sInd).attr("issue") + " - " + $("#MainContent_heading" + index).attr("issue"));
            $("#divResults").accordion({
                change: onAccChange,
                animated: false,
                active: false
            });            

            //onAccChange(null,{newHeader: $("#MainContent_heading" + sInd), newContent: $("#MainContent_content" + sInd)});
        }

        function onAccChange(event, ui)
        {
            if (ui.newContent.attr("loaded") == "1")
                return;

            $.ajax({
                type: "POST",
                async: false,
                url: "ViewIssues.aspx/GetIssue",
                data: "{'cid':'" + cid + "','issue': '" + ui.newHeader.attr("issue") + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.d == null || result.d == undefined || result.d.length == 0) {
                        
                    }
                    
                    ui.newContent.css("height", "140px");
                    ui.newContent.html(result.d);

                    $("#txtQty" + ui.newHeader.attr("issue")).bind("change", function() {
                        $("#cartQty").html(parseInt(this.value) + parseInt($("#cartQty").html()));
                    });

                    ui.newContent.find("div").each(function (index, value) {
                        new Spinner(value);
                    });

                    ui.newContent.attr("loaded", "1")
                },
                error: function (result) 
                { 
                    alert("error loading issue");
                }
            });
        }

        function showDetails(img)
        {
            if (typeof(img) == "string")
                img = $("#img" + img);
                //img = document.getElementById("img" + img);
            else
                img = $(img);

            var html;
            $( "#divImage" ).empty();
            $( "#divImage" ).dialog( "destroy" );

            html = "<table>";
            html += "<tr>";

            if (img.attr("noimage") != 1)
                html += "<td><img src=\"../Images/Covers/" + img.attr("cn").substring(0,1) + "/" + img.attr("cn") + "/" + img.attr("issue") + ".jpg\" Height='400px' Width='300px' /></td>";
            else
                html += "<td><img src='../Images/noimage.png' Height='400px' Width='300px' /></td>";
            
            html += "<td><table width='400px' cellspacing='10'>"
            html += "<tr><td><b>Comic:</b></td><td>" + img.attr("cn") + "</td></tr>"
            html += "<tr><td><b>Issue:</b></td><td>" + img.attr("issue") + "</td></tr>"
            html += "<tr><td><b>Cover Date:</b></td><td>" + img.attr("cd") + "</td></tr>"
            html += "<tr><td><b>Cover Price:</b></td><td>$" + img.attr("cp") + "</td></tr>"
            html += "<tr><td><b>Storylines:</b></td><td>" + img.attr("sl") + "</td></tr>"
            html += "<tr><td><b>Writer:</b></td><td>" + img.attr("wrt") + "</td></tr>"
            html += "<tr><td><b>Artist:</b></td><td>" + img.attr("art") + "</td></tr>"
            html += "</table></td>"
            html += "</tr>";

            html += "</table>";

            $( "#divImage" ).append(html);
            $( "#divImage" ).dialog({
                title: "Issue Details",
                modal: true,
                height: 'auto',
                width: 'auto',
                position: ['center','middle']
            });
        }

    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="Heading" runat="server">
    Listing Issues for <%= Request.QueryString["CT"] %>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="pager" style="margin-bottom: 10px;">    
        <table width="100%">
            <tr>
                <td width="33% align="left" style="border-right: 1px solid #d9d6c4;">
                    <table cellspacing="5" align="center">
                    <tr>
                    <td>Navigate </td>
                    <td><a href="#" onclick="loadPage(PAGE_FIRST);"><img src="../images/pager/pfirst.png" title="Go To First Page" border="0"/></a></td>
                    <td><a href="#" onclick="loadPage(PAGE_PREV);"><img src="../images/pager/pprevious.png" title="Go To Previous Page"  border="0"/></a></td>
                    <td><a href="#" onclick="loadPage(PAGE_NEXT);"><img src="../images/pager/pnext.png" title="Go To Next Page"  border="0"/></a></td>
                    <td><a href="#" onclick="loadPage(PAGE_LAST);"><img src="../images/pager/plast.png" title="Go To Last Page"  border="0"/></a></td>
                    </tr>
                    </table>
                </td>
                <td width="33%" align="center" style="border-right: 1px solid #d9d6c4;" id="tdShowing"> Showing Issues XX - YY</td>
                <td width="33%">
                    <table align="center">
                    <tr>
                    <td>Jump to page</td>
                    <td>
                        <select id="selPager" onchange="loadPage(this.value)" class="dropdown" style="width:200px;">                            
                        </select>
                    </td>
                    </tr>
                    </table>
                </td>



                
            </tr>
        </table>
    </div>

    <div id="divResults">
    </div>

    <div id="divImage">        
    </div>

    <div id="divMaster" runat="server" style="display:none;">
    </div>
</asp:Content>
